<div
  v-loading="isPageLoading"
  :class="[$store.state.appPrefix + '-p-period-group-trainee', $store.state.appPrefix + '-p-period-comon']" data-table-extra="56">
  <div class="info-header">
    <i class="el-icon-arrow-left" @click="$router.go(-1)"></i>
    学习记录{{nickName ? ' - ' + nickName : ''}}
    <div class="header-actions fr">
      <!-- <el-button class="add-btn mt12" size="small" @click="$exportRecord">导出EXCEL</el-button> -->
    </div>
  </div>
  <div class="g-table-layout">  
    <div class="g-table-top g-table-top-action__flex g-table-top-action__flex--br">
      <div class="g-table-top-action__left">
        <template v-if="courseId">
          <el-search
            size="small"
            :defaultKeyword="filterForm.q"
            v-model="filterForm.q"
            class="g-table-top-action__left--block g-table-top-action__left--row"
            isBasic
            @search="$search"
            @clear="() => {filterForm.q = ''; $search()}"
            placeholder="请输入姓名或账号">
          </el-search>        
          <el-select
            size="small"
            class="g-table-top-action__left--block g-table-top-action__left--row"
            v-model="filterForm.groupId"
            placeholder="所属分组"
            clearable
            @change="$search">
            <el-option
              v-for="item in groupList"
              :key="item.id"
              :label="item.groupName"
              :value="item.id">
            </el-option>
          </el-select>
          <el-select
            size="small"
            class="g-table-top-action__left--block g-table-top-action__left--row"
            v-model="filterForm.lessonId"
            placeholder="所属课时"
            clearable
            @change="$search">
            <el-option
              v-for="item in lessonList"
              :key="item.id"
              :label="item.lessonName"
              :value="item.id">
            </el-option>
          </el-select>
        </template>
        <el-select
          size="small"
          class="g-table-top-action__left--block g-table-top-action__left--row"
          v-model="filterForm.exerciseType"
          placeholder="练习项目"
          clearable
          @change="$search">
          <el-option
            v-for="item in FUN_IDS_OPTIONS"
            :key="item.codeNum"
            :label="item.codeName"
            :value="item.codeNum">
          </el-option>
        </el-select>
        <el-select
          size="small"
          class="g-table-top-action__left--block g-table-top-action__left--row"
          v-model="filterForm.passingState"
          placeholder="及格状态"
          clearable
          @change="$search">
          <el-option
            v-for="item in PASSING_STATE"
            :key="item.codeNum"
            :label="item.codeName"
            :value="item.codeNum">
          </el-option>
        </el-select>
      </div>
      <div class="g-table-top-action__right"></div>
    </div>
    <el-table v-loading="isPageLoading" :height="tableHeight" :data="tableList">
      <el-table-column
        v-for="col in COL_INDEXS"
        :key="col.prop"
        :prop="col.interfaceParam"
        :label="col.label"
        show-overflow-tooltip
        :min-width="120">
        <template slot-scope="scope">
          <span v-if="col.isMap" :class="col.mapOptions[scope.row[col.prop]] && col.mapOptions[scope.row[col.prop]].className">{{col.mapOptions[scope.row[col.prop]] && col.mapOptions[scope.row[col.prop]].codeName | filterBlank}}</span>
          <span v-else-if="col.isJudgeColor" :class="scope.row[col.prop]">{{scope.row[col.prop] | filterBlank}}{{col.unit}}</span>
          <span v-else>{{col.prevTxt}}{{scope.row[col.prop] | filterBlank}}{{col.unit}}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        fixed="right"
        :width="120"
        class-name="no-ellipsis">
        <template slot-scope="scope">
          <div class="btns">
            <el-button type="text" size="medium" @click="$handleReport(scope.row)">查看报告</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-if="totalCount > 0"
      class="g-table-bottom g-pagination"
      background
      :hide-on-single-page="true"
      :layout="PAGE_CONFIG.simpleLayout"
      :total="totalCount"
      :page-size="pageSize"
      :current-page.sync="pageNo"
      @current-change="$handlePageChange">
    </el-pagination>
  </div>
</div>
